<template>
    <el-popover placement="bottom-start" :visible='popoverStat' ref="popover" @hide="hidePop" popper-class="datePicker" width="654" trigger="click">
      <div class="switch">
              <el-switch
                inactive-text="对比">
              </el-switch>
              <i class="el-icon-close"></i>
            </div>
      <div class="content">
        <div class="selectTimeLeft">
            <div class="radio" v-for="(item, index) in radioList" :key="index" @click="activeRadio(index)">
              <div class="data-text" :class="{'changecolor':active ==index}">{{item}}</div>
          </div>
        </div>
        <div class="dateRight">
          <div class="dateTop">
            <el-date-picker
              v-model="date"
              popper-class="zero"
              ref="datePicker"
              type="daterange"
              @blur="blurDate"
              @change="changeDate"
              :picker-options="firstDayOfWeek">
            </el-date-picker>
          </div>
          <div class="timeZone"> 
            <div class="btns">
              <div @click="closeDate" class="close">取消</div>
              <div @click="closeAndDate" class="change">应用</div>
            </div>
          </div>
        </div>
      </div>
      <div slot="reference" class="date" @click="openPop" >
        <div class="selectDay">{{startDate}}</div>
        <div class="data-text">(UTC-03:00) 布宜诺斯艾利斯时间<i class="el-icon-question"></i></div>
        <img src="../../../public/imgs/date.png" class="arrowImg" alt=""> 
      </div>
    </el-popover>
  </template>
  <script>
  export default {
    data() {
      return {
        date: [],
        startDate: '',
        translateStat: false,
        radioList: ['Lifetime','Today', 'Yseterday', 'Last 7 days', 'Last 14 days', 'Last 30 days', 'This Week', 'Last Week', 'This Month', 'Last Month'],
        active: 2,
        value: '1',
        value2:'',
        popoverStat: false,
        cancalDate: [],
        changeTime: [],
        step: 0,
      }
    },
    created() {
      this.getDateTime()
    },
    watch: {
      popoverStat(popoverStat) {
        const elementdiv = document.querySelector('.date')
        if (popoverStat) {
          this.$refs.datePicker.focus()
          elementdiv.classList.add('changeborder')
        } else {
          elementdiv.classList.remove('changeborder')
          this.$refs.datePicker.handleClose()
        }
      },
      active(active) {
      if (active === 2) {
        //昨天
        this.setTimeDate(1, 'select')
      } else if (active === 7) {
        //上周
        this.setTimeDate(2, 'select')
      } else if(active === 9) {
        //上月
        this.setTimeDate(3, 'select')
      } else if(active === 13){
        //。。。
        this.setTimeDate(4, 'select') 
      }else if(active === 1){
        //今天
        this.setTimeDate(5, 'select')
      }else if(active === 6){
        //上周
        this.setTimeDate(6, 'select')
      }else if(active === 8){
        //本月
        this.setTimeDate(7, 'select')
      }else if(active === 0){
        this.setTimeDate(8,'select')
      }
    },
      date(newDate, oldDate) {
        if (this.translateStat) {
          this.active = 13
        }
        this.cancalDate = oldDate
      }
    },
    methods: {
      timeDate(){
        console.log(   );
      },
      // 获取默认昨天的date日期
      getDateTime() {
        let date = new Date();
        let time = date.getTime() - 86400000 //昨天
        let newDate = new Date(time)
        let year = newDate.getFullYear();
        let Month = newDate.getMonth() + 1;
        let Day = newDate.getDate();
        const month = Month < 10 ? ('0' + Month)  : Month;
        const day = Day < 10 ? ('0' + Day)  : Day;
        this.startDate = year + '-' + month + '-' + day + '  ~  ' + year + '-' + month + '-' + day
        this.value1 = year + '-' + month + '-' + day 
        this.value2 = year + '-' + month + '-' + day 
      },
      // 选中对应的单选框触发
      activeRadio(index) {
        this.active = index
        // this.popoverStat = false
        // this.$refs.popover.doClose(); 
      },
      changDate(type) {
        if (this.step > 1) {
          const start = this.changeTime[0]
          const end = this.changeTime[1]
          let startDate = new Date(start)
          let startYear = startDate.getFullYear();
          let StartMonth = startDate.getMonth() + 1;
          let StartDay = startDate.getDate();
          const startMonth = StartMonth < 10 ? ('0' + StartMonth)  : StartMonth;
        const startDay = StartDay < 10 ? ('0' + StartDay)  : StartDay;
          let endDate = new Date(end)
          let endYear = endDate.getFullYear();
          let EndMonth = endDate.getMonth() + 1;
          let EndDay = endDate.getDate();
          const endMonth = EndMonth < 10 ? ('0' + EndMonth)  : EndMonth;
        const endDay = EndDay < 10 ? ('0' + EndDay)  : EndDay;
          if (type === 1) {
            this.value1 = `${startYear}-${startMonth}-${startDay}`
            this.value2 = `${endYear}-${endMonth}-${endDay}`
          } else {
            this.value1  = `${startYear}-${startMonth}-${startDay}`
            this.value2 = `${endYear}-${endMonth}-${endDay}`
          }
        } else {
          let date = new Date();
          let time = date.getTime() - 86400000
          let newDate = new Date(time)
          let year = newDate.getFullYear();
          let Month = newDate.getMonth() + 1;
          let Day = newDate.getDate();
          const month = Month < 10 ? ('0' + Month)  : Month;
        const day = Day < 10 ? ('0' + Day)  : Day;
          if (type === 1) {
            this.value1 = year + '-' + month + '-' + day
          } else {
            this.value2 = year + '-' + month + '-' + day
          }
        }
      },
      // 取消事件
      closeDate() {
        this.popoverStat = false
        this.$refs.popover.doClose();
        this.$refs.datePicker.picker.$emit('pick', this.cancalDate);
      },
      // 更新事件
      closeAndDate() {
        this.popoverStat = false
        this.$refs.popover.doClose();
        this.setTimeDate(4, 'select')
      },
      // 点击div按钮触发
      openPop() {
        this.popoverStat = true
        this.$refs.datePicker.focus()
        setTimeout(() => {
          if (this.active === 2) {
            // 昨天
            this.setTimeDate(1, 'open')
          } else if(this.active === 7) {
            // 上周自然周
            this.setTimeDate(2, 'open')
          } else if(this.active === 9) {
            // 上月整个月
            this.setTimeDate(3, 'open')
          } else if(this.active === 13){
            // ...
            this.setTimeDate(4, 'open')
          } else if(this.active === 1){
            // 今天
            this.setTimeDate(5, 'open')
          } else if(this.active === 6){
            // 上周
            this.setTimeDate(6, 'open')
          } else if(this.active === 8){
            // 本月
            this.setTimeDate(7, 'open')
          } else if(this.active === 9){
            // 本月
            this.setTimeDate(8, 'open')
          } else{
            console.log(111);
          }
        }, 200)
      },
      // 定义传出时间
      setTimeDate(type, status) {
        this.startDate='';
        // 昨天时间
        if (type === 1) {
          //昨天
          this.translateStat = false
          let date = new Date();
          let time = date.getTime() - 86400000
          let newDate = new Date(time)
          let year = newDate.getFullYear();
          let Month = newDate.getMonth() + 1;
          let Day = newDate.getDate();
          const month = Month < 10 ? ('0' + Month)  : Month;
        const day = Day < 10 ? ('0' + Day)  : Day;
          const start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24);
          this.$refs.datePicker.picker.$emit('pick', [start, start])
          const timeDate = `${year}/${month}/${day}` + '-' + `${year}/${month}/${day}`
          this.startDate = `${year}-${month}-${day}` + ' ~ ' + `${year}-${month}-${day}`
        } else if(type === 2) {
          // 上周自然周
          this.translateStat = false
          let now = new Date();
          let nowTime = now.getTime();
          let weekDay = now.getDay(); 
          let oneDayTime = 24 * 3600* 1000;
          const start = nowTime - (weekDay + 7) * oneDayTime;
          const end = nowTime - (weekDay + 1) * oneDayTime;
          this.$refs.datePicker.picker.$emit('pick', [start, end]);
          let startDate = new Date(start)
          let startYear = startDate.getFullYear();
          let StartMonth = startDate.getMonth() + 1;
          let StartDay = startDate.getDate();
          const startMonth = StartMonth < 10 ? ('0' + StartMonth)  : StartMonth;
        const startDay = StartDay < 10 ? ('0' + StartDay)  : StartDay;
          let endDate = new Date(end)
          let endYear = endDate.getFullYear();
          let EndMonth = endDate.getMonth() + 1;
          let EndDay = endDate.getDate();
          const endMonth = EndMonth < 10 ? ('0' + EndMonth)  : EndMonth;
        const endDay = EndDay < 10 ? ('0' + EndDay)  : EndDay;
          const timeDate = `${startYear}-${startMonth}-${startDay}` + ' ~ ' + `${endYear}-${endMonth}-${endDay}`
          this.startDate = `${startYear}-${startMonth}-${startDay}` + ' ~ ' + `${endYear}-${endMonth}-${endDay}`
        } else if(type === 3) {
          // 上个月
          this.translateStat = false
          let now = new Date();
          let lastMonth = now.getMonth();
          let nowYear = now.getFullYear();
          const start = new Date(nowYear, lastMonth - 1, 1);
          const end = new Date(nowYear, lastMonth, 0);
          this.$refs.datePicker.picker.$emit('pick', [start, end]);
          let startDate = new Date(start)
          let startYear = startDate.getFullYear();
          let StartMonth = startDate.getMonth() + 1;
          let StartDay = startDate.getDate();
          const startMonth = StartMonth < 10 ? ('0' + StartMonth)  : StartMonth;
        const startDay = StartDay < 10 ? ('0' + StartDay)  : StartDay;
          let endDate = new Date(end)
          let endYear = endDate.getFullYear();
          let EndMonth = endDate.getMonth() + 1;
          let EndDay = endDate.getDate();
          const endMonth = EndMonth < 10 ? ('0' + EndMonth)  : EndMonth;
        const endDay = EndDay < 10 ? ('0' + EndDay)  : EndDay;
          const timeDate = `${startYear}-${startMonth}-${startDay}` + ' ~ ' + `${endYear}-${endMonth}-${endDay}`
          this.startDate = `${startYear}-${startMonth}-${startDay}` + ' ~ ' + `${endYear}-${endMonth}-${endDay}`
        } else if(type === 4) {
          // ...
          this.active = 13
          this.translateStat = true
          const start = this.date[0]
          const end = this.date[1]
          let startDate = new Date(start)
          let startYear = startDate.getFullYear();
          let StartMonth = startDate.getMonth() + 1;
          let StartDay = startDate.getDate();
          const startMonth = StartMonth < 10 ? ('0' + StartMonth)  : StartMonth;
        const startDay = StartDay < 10 ? ('0' + StartDay)  : StartDay;
          let endDate = new Date(end)
          let endYear = endDate.getFullYear();
          let EndMonth = endDate.getMonth() + 1;
          let EndDay = endDate.getDate();
          const endMonth = EndMonth < 10 ? ('0' + EndMonth)  : EndMonth;
        const endDay = EndDay < 10 ? ('0' + EndDay)  : EndDay;
          const startTime = `${startYear}/${startMonth}/${startDay}`
          const endTime = `${endYear}/${endMonth}/${endDay}`
          if (startTime === endTime) {
            this.startDate = `${startYear}-${startMonth}-${startDay}` + ' ~ '+ `${startYear}-${startMonth}-${startDay}`
          } else {
            this.startDate = `${startYear}-${startMonth}-${startDay}` + ' ~ ' + `${endYear}-${endMonth}-${endDay}`
          }
          const timeDate = startTime + '-' + endTime
          this.$refs.datePicker.picker.$emit('pick', this.date);
          if (status === 'select') {
            this.$bus.$emit('timeDate',  timeDate)
          }
        } else if(type === 5) {
          //今天时间
          this.translateStat = false
          let date = new Date();
          let time = date.getTime()
          let newDate = new Date(time)
          let year = newDate.getFullYear();
          let Month = newDate.getMonth() + 1; 
          let Day = newDate.getDate();
          const month = Month < 10 ? ('0' + Month)  : Month;
        const day = Day < 10 ? ('0' + Day)  : Day;
          const start = new Date();
          start.setTime(start.getTime());
          this.$refs.datePicker.picker.$emit('pick', [start, start])
          const timeDate = `${year}-${month}-${day}` + ' ~ ' + `${year}-${month}-${day}`
          this.startDate = `${year}-${month}-${day}` + ' ~ ' + `${year}-${month}-${day}`
        } else if(type === 6){
           // 本周自然周
           this.translateStat = false
          let now = new Date();
          let nowTime = now.getTime();
          let weekDay = now.getDay();
          let oneDayTime = 24 * 3600* 1000;
          const start = nowTime - (weekDay) * oneDayTime;
          const end = nowTime - (weekDay -6) * oneDayTime;
          this.$refs.datePicker.picker.$emit('pick', [start, end]);
          let startDate = new Date(start)
          let startYear = startDate.getFullYear();
          let StartMonth = startDate.getMonth() + 1;
          let StartDay = startDate.getDate();
          const startMonth = StartMonth < 10 ? ('0' + StartMonth)  : StartMonth;
        const startDay = StartDay < 10 ? ('0' + StartDay)  : StartDay;
          let endDate = new Date(end)
          let endYear = endDate.getFullYear();
          let EndMonth = endDate.getMonth() + 1;
          let EndDay = endDate.getDate();
          const endMonth = EndMonth < 10 ? ('0' + EndMonth)  : EndMonth;
        const endDay = EndDay < 10 ? ('0' + EndDay)  : EndDay;
          const timeDate = `${startYear}-${startMonth}-${startDay}` + ' ~ ' + `${endYear}-${endMonth}-${endDay}`
          this.startDate = `${startYear}-${startMonth}-${startDay}` + ' ~ ' + `${endYear}-${endMonth}-${endDay}`
        } else if(type === 7){
           // 本月
           this.translateStat = false
          let now = new Date();
          let lastMonth = now.getMonth();
          let nowYear = now.getFullYear();
          const start = new Date(nowYear, lastMonth, 1);
          const end = new Date(nowYear, lastMonth +1, 0);
          this.$refs.datePicker.picker.$emit('pick', [start, end]);
          let startDate = new Date(start)
          let startYear = startDate.getFullYear();
          let StartMonth = startDate.getMonth() + 1;
          let StartDay = startDate.getDate();
          const startMonth = StartMonth < 10 ? ('0' + StartMonth)  : StartMonth;
        const startDay = StartDay < 10 ? ('0' + StartDay)  : StartDay;
          let endDate = new Date(end)
          let endYear = endDate.getFullYear();
          let EndMonth = endDate.getMonth() + 1;
          let EndDay = endDate.getDate();
          const endMonth = EndMonth < 10 ? ('0' + EndMonth)  : EndMonth;
        const endDay = EndDay < 10 ? ('0' + EndDay)  : EndDay;
          const timeDate = `${startYear}-${startMonth}-${startDay}` + ' ~ ' + `${endYear}-${endMonth}-${endDay}`
          this.startDate = `${startYear}-${startMonth}-${startDay}` + ' ~ ' + `${endYear}-${endMonth}-${endDay}`
        } else if(type === 8){
           // 最大时间
           this.translateStat = false
          let now = new Date();
          let lastMonth = now.getMonth();
          let nowYear = now.getFullYear();
          const start = new Date(nowYear, lastMonth-3, 1);
          const end = new Date(nowYear, lastMonth +1,0);
          this.$refs.datePicker.picker.$emit('pick', [start, end]);
          let startDate = new Date(start)
          let startYear = startDate.getFullYear();
          let StartMonth = startDate.getMonth() +1;
          let StartDay = startDate.getDate();
          const startMonth = StartMonth < 10 ? ('0' + StartMonth)  : StartMonth;
        const startDay = StartDay < 10 ? ('0' + StartDay)  : StartDay;
          let endDate = new Date(end)
          let endYear = endDate.getFullYear();
          let EndMonth = endDate.getMonth() + 1;
          let EndDay = endDate.getDate();
          const endMonth = EndMonth < 10 ? ('0' + EndMonth)  : EndMonth;
        const endDay = EndDay < 10 ? ('0' + EndDay)  : EndDay;
          const timeDate = `${startYear}-${startMonth}-${startDay}` + ' ~ ' + `${endYear}-${endMonth}-${endDay}`
          this.startDate = `${startYear}-${startMonth}-${startDay}` + ' ~ ' + `${endYear}-${endMonth}-${endDay}`
        }
      },
      firstDayOfWeek(){},
      hidePop() {
        this.popoverStat = false
      },
      blurDate() {
        if (this.popoverStat) {
          this.$refs.datePicker.focus()
        }
      },
      // 随便选日期就为自定义
      changeDate(value) {
        this.step += 1
        this.changeTime = value
        const start = value[0]
        const end = value[1]
        let startDate = new Date(start)
        let startYear = startDate.getFullYear();
        let StartMonth = startDate.getMonth() + 1;
        let StartDay = startDate.getDate();
        const startMonth = StartMonth < 10 ? ('0' + StartMonth)  : StartMonth;
        const startDay = StartDay < 10 ? ('0' + StartDay)  : StartDay;
        let endDate = new Date(end)
        let endYear = endDate.getFullYear();
        let EndMonth = endDate.getMonth() + 1;
        let EndDay = endDate.getDate();
        const endMonth = EndMonth < 10 ? ('0' + EndMonth)  : EndMonth;
        const endDay = EndDay < 10 ? ('0' + EndDay)  : EndDay;
        this.value1 = `${startYear}年${startMonth}月${startDay}日`
        this.value2 = `${endYear}年${endMonth}月${endDay}日`
      }
    }
  }
  </script>
  
  <style scoped lang="scss">
    @import url('./dataIndex.scss');
    .dateInput ::v-deep .el-input {
      width: 118px !important;
      height: 34px  !important;
      .el-input__inner {
        width: 122px !important;
        height: 34px !important;
        color: black;
      }
    }
    .select1 ::v-deep .el-input {
      width: 206px !important;
      height: 34px !important;
      .el-input__inner {
        width: 236px !important;
        height: 34px !important;
        color: black;
      }
      .el-select__caret {
        display: none;
      }
    }
    .el-popover__reference{
      background-color: #F3F3F3;
    }
    .el-popover__reference:hover{
      background-color: #d9d9d9;
    }
  </style>
  <style scoped>
    .selectTimeLeft::-webkit-scrollbar {
        width: 8px;
        height: 10px;
      }

      .selectTimeLeft::-webkit-scrollbar-thumb {
          background-color: #DFDFDF;
          border-radius: 10px ;
      }
      .selectTimeLeft::-webkit-scrollbar-thumb:hover {
          background-color: #888;
          border-radius: 20px ;
      }
  </style>